<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <title>Bootstrap Tree View</title>
    <!--    <link href="http://jonmiles.github.io/bootstrap-treeview/bower_components/bootstrap/dist/css/bootstrap.css"
              rel="stylesheet">-->
    <link href="./plugins/tree-view/bootstrap-treeview.min.css" rel="stylesheet">
    <!--bootstrap-dialog end-->
    <script type="text/javascript" src="./dist/js/customPlugin.js"></script>
    <style>
        body {
            font-size: 16px;
            padding-right: 0px !important;
        }

        *.modal-open {
            overflow-y: scroll;
            padding-right: 0 !important;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            functionList();
            //onLoad();

            BindEvent();
            //页面加载
            function onLoad() {
                //渲染树
                $('#left-tree').treeview({
                    data: getTree(),
                    levels: 1,
                    onNodeSelected: function (event, node) {
                        $('#editName').val(node.text);
                    },
                    showCheckbox: false//是否显示多选
                });
            }

            //事件注册
            function BindEvent() {
                //保存-新增
                $("#Save").click(function () {
                    $('#addOperation-dialog').modal('hide')
                    //静态添加节点
                    var parentNode = $('#left-tree').treeview('getSelected');
                    var node = {
                        text: $('#addName').val()
                    };
                    $('#left-tree').treeview('addNode', [node, parentNode]);

                });
            }

            //保存-编辑
            $('#Edit').click(function () {
                var node = $('#left-tree').treeview('getSelected');
                if (node.length == 0) {
                    $("#msg").text("请选择节点!");
                    $("#deleteModal").modal("show");
                    return;
                }
                var newNode = {
                    text: $('#editName').val()
                };
                $('#left-tree').treeview('updateNode', [node, newNode]);
            });


            //显示-添加
            $("#btnAdd").click(function () {
                var node = $('#left-tree').treeview('getSelected');
                /*                if (node.length == 0) {
                 $("#deleteModal").modal("show");
                 return;
                 }*/
                $('#addName').val('');
                $('#addOperation-dialog').modal('show');

            });
            //显示-编辑
            $("#btnEdit").click(function () {
                var node = $('#left-tree').treeview('getSelected');
                $('#editShow').show();

            });
            //删除
            $("#btnDel").click(function () {
                var node = $('#left-tree').treeview('getSelected');
                if (node.length == 0) {
                    $("#msg").text("请选择节点!")
                    $("#deleteModal").modal("show");
                    return;
                }

                $("#deleteModal").modal("show");

            });
            $("#btnMove").click(function () {
                $("#deleteModal").modal("show");
            });

            $("#delBtn").on("click", function () {
                alert("ok");
                var node = $('#left-tree').treeview('getSelected');
                del(node);
            });


            //获取树数据
            function getTree() {
                var tree = [
                    {
                        text: "一年级",
                        id: "1",
                        nodes: [
                            {
                                text: "一班",
                                id: "2",
                                nodes: [
                                    {
                                        text: "物理"
                                    },
                                    {
                                        text: "化学"
                                    }
                                ]
                            },
                            {
                                text: "二班"
                            }
                        ]
                    },
                    {
                        text: "二年级"
                    },
                    {
                        text: "三年级"
                    },
                    {
                        text: "四年级"
                    },
                    {
                        text: "五年级"
                    }
                ];
                return tree;
            }

            /*-----页面pannel内容区高度自适应 start-----*/
            $(window).resize(function () {
                setCenterHeight();
            });
            setCenterHeight();
            function setCenterHeight() {
                var height = $(window).height();
                var centerHight = height - 240;
                $(".right_centent").height(centerHight).css("overflow", "auto");
            }

            /*-----页面pannel内容区高度自适应 end-----*/
        });


    </script>
</head>
<body>
<header class="container" style="margin-bottom: 5px;margin-top: 5px;margin-left: 0px;">
    <div class="row">
        <div class="col-md-12">
<!--            <input id="btnAdd" class="btn btn-primary" type="button" value="添加节点">-->
            <!--<input id="btnDel" class="btn btn-danger" type="button" value="删除节点">-->
        </div>
    </div>
</header>


<div class="container" style="max-width: 100%;width: 100%;">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-primary ">
                <div class="panel-heading">
                    <h3 class="panel-title">系统功能架构</h3>
                </div>
                <div class="panel-body right_centent" style="">
                    <div id="left-tree"></div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-primary ">
                <div class="panel-heading">
                    <h3 class="panel-title">编辑区</h3>
                </div>
                <!--编辑操作权限 start-->
                <div class="panel-body right_centent">
                    <div id="editShow">
                        <div>
                            <div class="input-group margin-t-5">
                                <span class="input-group-addon">名称:</span>

                                <input id="editName" type="text" class="form-control" style="width: 95%;"/>
                                <input id="Edit" class="btn btn-danger" type="button" value="确定"
                                       style="float: right;margin-top: 2px"/>
                            </div>
                        </div>
                    </div>
                    <div style="width: 100%;" id="data-content">
                        <div class="card-body" id="content">

                        </div>
                    </div>
                </div>
                <!--编辑操作权限 end-->
            </div>
        </div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="addOperation-dialog"   role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" style="max-width: 1000px;height: 300px">
        <div class="modal-content">
            <div class="modal-header">

                <h4 class="modal-title" id="myModalLabel">新增</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <div group="" item="add">
                    <div>
                        <div class="input-group margin-t-5">
                            <span class="input-group-addon">名称:</span>
                            <input id="addName" type="text" class="form-control"/>
                        </div>

                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button id="Save" type="button" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

            </div>
        </div>


    </div>
</div>
<!--弹出框 新增权限 end-->
<!--点击删除按钮后弹出的页面-->
<div class="modal fade" id="deleteModal"   role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="height: 200px">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    提示
                </h4>
                <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">-->
                <!--&times;-->
                <!--</button> -->
            </div>
            <div class="modal-body" id="msg">
                你确定要删除该条信息吗？
                <input id="del_id" style="display: none"/>
            </div>
            <div class="modal-footer">
                <button id="delBtn" type="submit" class="btn btn-primary" value="submit">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</div>

<input name="comId" type="text" class="form-control" id="comId" value="" style="display: none">
<input name="subcomId" type="text" class="form-control" id="subcomId" value="" style="display: none">
<input name="depId" type="text" class="form-control" id="depId" value="" style="display: none">
<input name="posId" type="text" class="form-control" id="posId" value="" style="display: none">
<script src="./plugins/tree-view/bootstrap-treeview.js"></script>
<script type="text/javascript">
    $(function () {
//        functionList();
    });

    function functionList() {
        var url = encodeURI("./funcAuthorityList.action");
        $.ajax({
            type: 'POST',
            url: url,
            data: {},
            dataType: "json",
            success: function (result) {
                if (result.success) {
                    //刷新表格
                    var data = result.data;
                    $('#left-tree').treeview({
                        color: "#428bca",
                        /*                        expandIcon: "glyphicon glyphicon-stop",
                         collapseIcon: "glyphicon glyphicon-unchecked",
                         nodeIcon: "glyphicon glyphicon-user",*/
                        showTags: true,
                        levels: 1,
                        showCheckbox: false,//是否显示多选
                        onNodeSelected: function (event, data) {
                            if (data.href != null && data.href != '') {
                                eval(data.href);
                            }
                            $('#editName').val(data.text);
                        },
                        data: data
                    });


                    actionTo(0, 1);

                } else {

                }
            },
            dataType: "json"
        });


    }

    function menuSearchBtn() {
        $('#left-tree').empty();
        functionList();
    }

    function actionTo(id, type) {
        $("#content").load("./web/authority.html", function () {
            loadData(id, type);
        });
    }

    function addNode(id,name, href) {
        var node = {
            Id: id,
            text: name,
            href: href
        };
        console.log(node);
        //静态添加节点
        var parentNode = $('#left-tree').treeview('getSelected');
        $('#left-tree').treeview('addNode', [node, parentNode]);
    }

    function updateNode(id, name, href) {
        console.log("寻找" + id);
        var node = $('#left-tree').treeview('getNodeById', id);
        //alert(parentNode.text);
        var newNode = {
            Id: id,
            text: name,
            href: href
        };
        if (node.Id != null) {
            console.log(node);

            $('#left-tree').treeview('updateNode', [node, newNode]);
        } else {
            node = $('#left-tree').treeview('getSelected');
            $('#left-tree').treeview('addNode', [node, newNode]);
        }


    }
    function deleteNode(id) {
        console.log("寻找" + id);
        parentNode = $('#left-tree').treeview('getNodeById', id);
        //alert(parentNode.text);
        if (parentNode != null) {
            console.log(parentNode.text + "");
        }
        $('#left-tree').treeview('removeNode', [parentNode, {silent: true}]);
    }

    function del(node) {
        $('#left-tree').treeview('removeNode', [node, {silent: true}]);
    }
</script>
</body>
</html>
